<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>有爱文档（UAI Editor）</title>
    <link rel="icon" href="/favicon.png" />
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .header-action {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 5px;
            padding: 5px;
            border-radius: 3px;
            cursor: pointer;
        }

        .collapsible-container {
            margin: 0;
        }

        .collapsible-header {
            padding: 10px;
            background: #f5f5f5;
            cursor: pointer;
            display: flex;
            align-items: center;
            border-bottom: solid 1px #ccc;

            .title {
                flex: 1;
            }

            .arrow {
                justify-content: flex-end;
                /* transition: transform 0.3s; */
            }
        }

        .collapsible-content {
            padding: 10px;
            overflow: hidden;
            border-bottom: solid 1px #ccc;
        }

        .collapsed .arrow {
            transform: rotate(-90deg);
        }

        .collapsed .collapsible-content {
            max-height: 0;
            padding: 0 10px;
        }

        .collapsible-content-item {
            margin-bottom: 10px;

            select {
                border: solid 1px rgba(0, 0, 0, 0.5);
                background-color: #fff;
                border-radius: 3px;
                margin-left: 3px;
                font-size: larger;
                padding: 2px;
                width: 60%;
            }

            button {
                margin: 3px 0;
                padding: 4px;
                text-align: center;
                cursor: pointer;
                color: #3480f9;
                border: 1px solid #3480f9;
                border-radius: 3px;
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div>
        <div
            style="height: 40px; margin: 5px; display: flex; flex-direction: row; text-align: center; align-items: center;">
            <div style="display: flex; flex-direction: row; text-align: center; align-items: center;">
                <img src="/favicon.png" height="40px" />
                &nbsp;&nbsp; 有爱文档使用示例
            </div>
            <div style="flex: 1;">
            </div>
            <div style="display: flex; flex-direction: row;">
                <div class="header-action">
                    <img src="/icons/locale.svg" width="16" />&nbsp;
                    <select id="language-selector"
                        style="border: none; outline: none; background: transparent; cursor: pointer;"
                        onchange="changeLanguage()">
                        <option value="zh_CN">简体中文</option>
                        <option value="en_US">English</option>
                    </select>
                </div>
                <div class="header-action" onclick="toggleControlPanel()">
                    <img src="/icons/expand.svg" width="16" />&nbsp;
                    <span>控制面板</span>
                </div>
            </div>
        </div>
        <div style="height: calc(100vh - 50px); display: flex; flex-direction: row;">
            <div id="uai-editor" style="width: 600px; flex: 1; border: solid 1px var(--uai-border-color)"></div>
            <div id="control-panel"
                style="width: 300px; height: 100%; display: none; border: solid 1px var(--uai-border-color);">
                <div class="tabs" style="height: 100%;">
                    <div style="display: flex; border-bottom: 1px solid #ccc;">
                        <div onclick="switchTab(0)" id="tab0" style="padding: 10px; cursor: pointer; background: #eee;">
                            事件/方法
                        </div>
                    </div>
                    <div id="content0" style="height: calc(100% - 41px); overflow: auto; overflow-x: hidden;">
                        <div class="collapsible-container">
                            <div class="collapsible-header" onclick="toggleCollapse(this)">
                                <span class="title">获取编辑器的内容</span>
                                <span class="arrow">▼</span>
                            </div>
                            <div class="collapsible-content">
                                <div class="collapsible-content-item">
                                    范围：
                                    <select id="content-scope">
                                        <option value="all">all</option>
                                        <option value="after">after</option>
                                        <option value="before">before</option>
                                        <option value="selection">selection</option>
                                    </select>
                                </div>
                                <div class="collapsible-content-item">
                                    格式：
                                    <select id="content-format">
                                        <option value="html">html</option>
                                        <option value="markdown">markdown</option>
                                        <option value="text">text</option>
                                    </select>
                                </div>
                                <div class="collapsible-content-item">
                                    <button onclick="getContent()">打印内容</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div id="uai-editor" style="height: 90vh; width: 90vw; overflow: hidden; border: solid 1px var(--uai-border-color)"></div> -->
    <script type="module" src="/src/main.ts"></script>
</body>

<script>
    window.lang = new URLSearchParams(window.location.search).get('lang');
    document.getElementById("language-selector").value = window.lang || "zh_CN";

    function changeLanguage() {
        const lang = document.getElementById("language-selector").value;
        const url = new URL(window.location.href);
        url.searchParams.set('lang', lang);
        window.location.href = url.toString();
    }

    function toggleControlPanel() {
        const controlpanel = document.getElementById("control-panel");
        if (controlpanel.style.display === "none") {
            controlpanel.style.display = "block";
        } else {
            controlpanel.style.display = "none";
        }
    }

    function switchTab(index) {
        document.getElementById('content0').style.display = 'none';

        document.getElementById('tab0').style.background = '';

        document.getElementById('content' + index).style.display = 'block';
        document.getElementById('tab' + index).style.background = '#eee';
    }

    function toggleCollapse(element) {
        const container = element.parentElement;
        container.classList.toggle('collapsed');
    }

    function getContent() {
        var scope = document.getElementById('content-scope');
        var format = document.getElementById('content-format');
        console.log(uaieditor.getContent(scope.options[scope.selectedIndex].value, format.options[format.selectedIndex].value));
    }
</script>

</html>